<script setup lang="ts">
import { ref, computed } from "vue";
let FirstName = ref("zhang");
let LastName = ref("san");
//直接用{{}}也可以
//但是不好维护
//这个是只读的
// let fullName = computed(() => {
//   return (
//     FirstName.value.slice(0, 1).toUpperCase() +
//     FirstName.value.slice(1) +
//     "-" +
//     LastName.value
//   );
// });
let fullName = computed({
  get() {
    return (
      FirstName.value.slice(0, 1).toUpperCase() +
      FirstName.value.slice(1) +
      "-" +
      LastName.value
    );
  },
  set(val) {
    const [str1, str2] = val.split("-");
    FirstName.value = str1;
    LastName.value = str2;
    console.log("set", val);
  },
});
function changeFullName() {
  fullName.value = "li-si";
}
</script>
<template>
  <div>
    姓:<input type="text" v-model="FirstName" /><br />
    名:<input type="text" v-model="LastName" /><br />
    全名:<span>{{ fullName }}</span>
    <button @click="changeFullName">点我改全名</button>
  </div>
</template>
